大家好今天我們主要會使用SliverAppBar、SliverList、SliverChildListDelegate、CustomScrollView
今天要做的是下拉會出現一個類似TabBar的效果

今天參考比較多別人的作法
CustomScrollView 與 Sliver
SliverList & SliverGrid (Flutter Widget of the Week)
6.5 CustomScrollView

先回顧一下，我們之前在做主頁面的時候是這樣的

 SingleChildScrollView(
              child: Column(
                children: [
                  _buildMajorRecommendedVideo(),
                  _buildWonderfulPreview(),
                  _buildRecommendedMenu("現正熱播"),
                  _buildRecommendedMenu("為您推薦"),
                  _buildTop10List(),
                ],
              )
            )

其實這樣去使用SingleChildScrollView，跟ListView差不多,也就是可改成如下

  ListView(
              children: [
                _buildMajorRecommendedVideo(),
                _buildWonderfulPreview(),
                _buildRecommendedMenu("現正熱播"),
                _buildRecommendedMenu("為您推薦"),
                _buildTop10List(),
              ],
            )

但今天需要在畫面上方多一個Bar，這個Bar是我在列表裡任意一個地方下拉都會出現
這個功能我們可以使用SliverAppBar實現，使用時需要用到CustomScrollView

CustomScrollView(
    slivers: [
        SliverAppBar(...),
        SliverList(...)
    ])

可以看到CustomScrollView能帶的是slivers，所以不能直接放ListView進來
把原本的ListView改成用SliverList

 SliverList(
            delegate: SliverChildListDelegate([
          _buildMajorRecommendedVideo(),
          _buildWonderfulPreview(),
          _buildRecommendedMenu("現正熱播"),
          _buildRecommendedMenu("為您推薦"),
          _buildTop10List(),
          SizedBox(
            height: 30.0,
          )
        ])),

SliverAppBar

它跟AppBar的屬性很像
設定不同的floating、pinned、snap效果是不一樣的，大家可以參考這裡，有不同設置的效果動畫

SliverAppBar(
          floating: true,
          pinned: false,
          snap: false,
          backgroundColor: Colors.transparent,
          title: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text("節目"),
              Text("電影"),
              Text("我的片單"),
            ],
          ),
          textTheme: TextTheme(
              headline6: TextStyle(color: Colors.white, fontSize: 16.0)),
          leading: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Image.asset(
              "assets/netflix_n.png",
            ),
          ),
        ),

今天之效果圖

GitHub連結： flutter-netflix-clone